$ = function() {
	return document.getElementById.apply(document, arguments);
}
$$ = function() {
    return document.querySelectorAll.apply(document, arguments);
}

jsonp = document.getElementById('jsonp');
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');

/*
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.closePath();
ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.stroke();
*/
searchBox = $('search');
searchBox.style.left = 0 + "px";
searchBox.style.top = window.innerHeight - 20 + "px";

function getJSON(url, success){
	doJson = function(data) { 
		success(data); 
	}
	var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = url.replace('callback=?','callback='+'doJson');
    jsonp.appendChild(s);
}

function getTweet(q) {
	getJSON('http://search.twitter.com/search.json?rpp=30&q='+escape(q)+'&callback=?', readTweets);
}

var tweets = [];
var memoryLimit = 30;
var twitsLimit = 30;

function readTweets(data) {
	var td = $('tweets');
	
	for(var i in data.results) {
		var contains = false;
		for (var j in tweets) {
			if (tweets[j].id == data.results[i].id) {
				contains = true;
				break;
			}
		}
		//if(!contains) tweets.unshift(data.results[i]);
		if(!contains) {
			tweets.push(data.results[i]);
			var t = document.createElement('div');
			t.className = 'twit';
			
			var html = "<strong class='user'><img src='%1'></img>%2</strong><div class='text'>%3</div>";
			//var html = "<img src='%1'></img><div>%2</div><div>%3</div>";
			html = html.replace(/%1/g, data.results[i].profile_image_url);
			html = html.replace(/%2/g, " " + data.results[i].from_user);
			html = html.replace(/%3/g, data.results[i].text);
			t.innerHTML = html;
			td.appendChild(t);
			
			t.style.width = window.innerWidth * 0.6 + "px";
			t.ptcl = new Ptcl();
			t.ptcl.x = window.innerWidth * 0.2;
			t.ptcl.y = window.innerWidth;
			t.ptcl.toX = t.ptcl.x;
			t.ptcl.toY = t.ptcl.y;
			t.ptcl.target = t;
			
			if(tweets.length > memoryLimit) {
				tweets.shift();
			}
			
			if(td.childNodes.length > twitsLimit) {
				td.removeChild(td.childNodes[0])
			}
		}
	}

	if(jsonp.childNodes.length > 1) {
		jsonp.removeChild(jsonp.childNodes[0])
	}
}

frameCount = 0;
currentTwit = null;
oldTwit = null;
function loop() {
	if(frameCount % (60 * 10) == 0) {
		getTweet(searchBox.textContent);
	}
	var twits = $$('.twit');
	for(var i = 0; i < twits.length; i++) {
		twits[i].ptcl.update();
	}
	if(frameCount % (60 * 5) == 0) {
		if(currentTwit != undefined) {
			currentTwit.ptcl.toY = -currentTwit.offsetHeight - 10;
		}
		var n = Math.floor(Math.random() * twits.length);
		currentTwit = twits[n];
		while(currentTwit === oldTwit){
			n = Math.floor(Math.random() * twits.length);
			currentTwit = twits[n];
		}		
		if(currentTwit != undefined) {
			currentTwit.ptcl.y = window.innerHeight;
			currentTwit.ptcl.toY = window.innerHeight * 0.5 - currentTwit.offsetHeight * 0.5;
			oldTwit = currentTwit;
			
			randomCircles();
		}
	}
	ctx.fillStyle = 'rgba(10, 6, 15, 0.05)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	frameCount++;
}

timer = setInterval(loop, 1000 / 60);

function randomCircles() {
	var n = Math.floor(Math.random() * 10 + 90);
	for(var i = 0; i < n; i++) {
		ctx.fillStyle = randomColor(250, 300, 0.5);
		var x = Math.random() * window.innerWidth;
		var y = Math.random() * window.innerHeight;
		var r = Math.random() * 100 + 20;
		circle(x, y, r);
	}
}

function randomColor(h0, h1, a) {
	var hue = Math.floor(Math.random() * (h1 - h0) + h0);
	return 'hsla(' + hue + ',100%,50%,0.2)';
}

function circle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}

function Ptcl() {};
Ptcl.prototype.x = 0;
Ptcl.prototype.y = 0;
Ptcl.prototype.toX = 0;
Ptcl.prototype.toY = 0;
Ptcl.prototype.dt = 0.05;
Ptcl.prototype.target = null;
Ptcl.prototype.update = function() {
	this.x += (this.toX - this.x) * this.dt;
	this.y += (this.toY - this.y) * this.dt;
	this.target.style.left = this.x + "px";
	this.target.style.top = this.y + "px";
}